<template>
    <div class="carCont" :style="'min-height: '+docheight+'px'">
      <div class="goodsList" v-if="!showTimeOut&&showCont">
            <div class="mainHead">
                <div class="checkCont" @click="checkAllFn">
                    <div :class="isAll?'isCheck checkAll iconfont icon-gouxuan1':'checkAll iconfont icon-gouxuan1'"></div>
                    <div class="checkText">全选</div>
                </div>
                <div class="mainTitle" @click="delFn" v-if="carCheckArr.length>0">删除</div>
            </div>
            <div class="goodsItem" :key="index2" v-for="(item,index2) in cartArr">
              <div @click="checkOneFn(item)" :class="item.check?'isCheck  checkOne iconfont icon-gouxuan1':'checkOne iconfont icon-gouxuan1'"></div>
              <div class="goodsImg" @click="toDetail(item)">
                <img :src="item.goods_image+ossSrc">
              </div>
              <div class="goodsInfo">
                <div class="goodsName" @click="toDetail(item)">{{ item.goods_name }}</div>
                <div class="goodsDes">{{ item.goods_describe }}</div>
                <div class="goodsCtrl">
                  <div class="goodsPrice">
                    <div>￥{{ item.goods_price }}</div>
                    <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                  </div>
                  <div class="goodsNumCont">
                    <div @click="downNum(item)" :class="item.sum==1?'disBtn editBtn iconfont icon-jian1':'editBtn iconfont icon-jian1'"></div>
                    <div class="goodsNum">{{ item.sum }}</div>
                    <div @click="upNum(item)" class="editBtn iconfont icon-jia"></div>
                  </div>
                </div>
              </div>
            </div>
            <nodata v-if="cartArr.length==0" text="购物车空空如也~"></nodata>         
          </div>
          <div class="likeCont" v-if="!showTimeOut&&showCont">
            <div class="mainHead">
                <div class="mainTitle">猜你喜欢</div>
            </div>
            <div class="cosList maxCosList">
                <div class="maxCosItem" @click="toDetail(item)" :key="index" v-for="(item,index) in listArr">
                    <div class="cosImg">
                    <img :src="item.goods_image+ossSrc" />
                    <div class="sortNum">{{ item.activity_name?item.activity_name:'精选' }}</div>
                    </div>
                    <div class="cosItemInfo">
                    <div class="cosName">
                        {{ item.goods_name }}
                    </div>
                    <div class="cosPrice">
                        <div>¥ {{ item.goods_price }}</div>
                        <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                    </div>
                    </div>
                </div>
            </div>
          </div>
      <div class="carCtrl">
        <div class="sumCont" v-if="$route.query.is_member==2">
          <div class="sum_price">SVIP：￥<span style="font-size: 1.1rem">{{ setMoney().menberSum }}</span></div>
          <div class="oldPrice">￥{{ setMoney().sum }}</div>
        </div>
        <div class="sumCont" v-if="$route.query.is_member==1">
          <div class="sum_price">合计：￥<span style="font-size: 1.1rem">{{ setMoney().sum }}</span></div>
        </div>
        <div :class="carCheckArr.length==0?'buyBtn notBuy':'buyBtn'" @click="saveFn">去结算({{ carCheckArr.length }})</div>
      </div>
      <getLoad v-if="!showCont"></getLoad>
      <sub-load v-if="showLoad"></sub-load>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    </div>
  </template>
  
  <script>
import nodata from '@/components/public/nodata'

import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  import {Toast } from 'vux'
  import subLoad from '@/components/public/subLoad.vue'

  import { showCart,guessLike,delCart } from '@/http/api'
  export default {
    components: {subLoad,nodata,Toast,getTimeOut,getLoad},
    data() {
      return {
        showTimeOut:false,
        showCont:false,
        showText:'',
        showToast:false,
        showLoad:false,
        listArr:[],
        cartArr:[],
        isAll:false,
        carCheckArr:[],
        checkNum:0,
      }
    },
    props: {},
    methods: {
      toDetail(item){
        this.$router.push({path:'/detail',query:{id:item.goods_id,goods_type:1}})
      },
      getCheckArr(){
        this.carCheckArr = []
        for(let i = 0; i <this.cartArr.length; i++){
            if(this.cartArr[i].check){
                this.carCheckArr.push(this.cartArr[i])
            }
        }
      },
      setMoney(){
        let sum = 0
        for(let i = 0; i <this.cartArr.length; i++){
            if(this.cartArr[i].check){
                sum += Number(this.cartArr[i].goods_price)*this.cartArr[i].sum
            }
        }
        let obj = {
            menberSum:(sum*this.$route.query.member_discount/100).toFixed(2),
            sum:sum.toFixed(2),
        }
        return obj
      },
      upNum(item){
        item.sum++
        this.setMoney()
      },
      downNum(item){
        if(item.sum>1){
            item.sum--
            this.setMoney()
        }
      },
      saveFn(){
        if(this.carCheckArr.length>0){
          let arr = []
          let cartIds = []
          for(let i = 0; i < this.carCheckArr.length; i++){
            arr.push({goods_id:this.carCheckArr[i].goods_id,num:this.carCheckArr[i].sum})
            cartIds.push(this.carCheckArr[i].goods_cart_id)
          }
          cartIds = cartIds.join(',')
          arr = JSON.stringify(arr)
          console.log(arr)
          console.log(cartIds)
          this.$router.push({path:'/orderWait',query:{goods_save:arr,cartIds:cartIds}})
        }else{
            this.showToast = true
            this.showText = '请选择结算的商品'
        }
      },
      delFn(){
        let goods_cart_ids = []
        for(let i = 0; i <this.carCheckArr.length; i++) {
            goods_cart_ids.push(this.carCheckArr[i].goods_cart_id)
        }
        let data= {
            goods_cart_ids:goods_cart_ids.join(","),
        }
        delCart(data).then((res)=>{
            if(res.data.code==1){
                this.cartArr = []
                this.carCheckArr = []
                this.isAll = false
                this.getData()
            }else{
                this.showToast = true
                this.showText = res.data.msg
            }
        }).catch(()=>{
            this.showToast = true
            this.showText = '网络请求超时'
        })
      },
      checkAllFn(){
        this.isAll = !this.isAll
        for(let i=0;i<this.cartArr.length;i++){
            this.cartArr[i].check = this.isAll
        }
        this.setMoney()
        this.getCheckArr()
      },
      checkOneFn(item){
        item.check = !item.check
        let result = true
        if(item.check){
            for(let i  = 0; i < this.cartArr.length;i++){
                if(!this.cartArr[i].check){
                    result = false
                }
            }
        }else{
            result = false
        }
        this.isAll = result
        this.getCheckArr()
        this.setMoney()
      },
      getData(){
        let data = {}
        showCart(data).then((res)=>{
          if(res.data.code==1){
            let arr = res.data.data
            for(let i = 0; i < arr.length; i++){
                arr[i]['check'] = false
            }
            this.cartArr = arr
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showCont= true
        }).catch(()=>{
        this.showTimeOut = true
        this.showCont= true
      })
      },
      getLike(){
        let data = {}
        guessLike(data).then((res)=>{
          if(res.data.code==1){
            this.listArr = res.data.data
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
        }).catch(()=>{
        this.showTimeOut = true
        this.showCont= true
      })
      }
    },
    mounted() {
    },
    created() {
      this.getData()
      this.getLike()
    },
  }
  </script>
  
  <style scoped lang="less">
  .carCont{
    width: 100%;
    background-color: #edf2ff;
    padding-bottom: 4.25rem;
    box-sizing: border-box;
    padding-top: 0.75rem;
    .goodsList{
        width: 92%;
        margin: 0 auto;
        border-radius: 0.75rem;
        background-color: #fff;
        padding: 0.75rem 4% 1.25rem;
        box-sizing: border-box;
        .mainHead{
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            margin-bottom: 0.75rem;
            .checkCont{
                display: flex;
                align-items:  center;
                font-size: 0.7rem;
                // color: #666;
                .checkAll{
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background-color: #ebebeb;
                text-align: center;
                color: white;
                line-height: 1rem;
                margin-right: 0.5rem;
                }
                .isCheck{
                    background: #6d94f8;
                }
                .checkText{
                    font-weight: bold;
                }
            }
            .mainTitle{
                font-weight: bold;
            }
        }
        .goodsItem{
        width: 100%;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        .checkOne{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #ebebeb;
            text-align: center;
            line-height: 1rem;
            color: white;
        }
        .isCheck{
            background-color: #6d94f8;
        }
        .goodsImg{
            width: 4rem;
            height: 4rem;
            overflow: hidden;
            border-radius: 0.25rem;
            margin: 0 0.5rem;
            img{
            width: 100%;
            }
        }
        .goodsInfo{
            width: 0.5rem;
            flex: 1;
            height: 4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goodsName{
            width: 100%;
            margin-top: 0.15rem;
            font-size: 0.7rem;
            font-weight: bold;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
            }
            .goodsDes{
            width: 100%;
            font-size: 0.6rem;
            color: #999;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
            }
            .goodsCtrl{
            width: 100%;
            display: flex;
            height: 1.5rem;
            align-items: center;
            line-height: 1.5rem;
            margin-top: 0.25rem;
            justify-content: space-between;
            .goodsPrice{
                font-size: 0.7rem;
                color: #6d94f8;
                display: flex;
                align-items: center;
            }
            .goodsNumCont{
                display: flex;
                height: 1rem;
                align-items: center;
                .editBtn{
                width: 1.7rem;
                height: 1.7rem;
                border-radius: 50%;
                background-color: #6d94f8;
                color: #fff;
                font-size: 0.7rem;
                text-align: center;
                line-height: 1.7rem;
                }
                .disBtn{
                    opacity: 0.4;
                }
                .goodsNum{
                width: 2rem;
                font-size: 0.7rem;
                text-align: center;
                }
            }
            }
        }
        }
    }
    .likeCont{
        width: 92%;
        margin: 0 auto;
        margin-top: 1rem;
        background-color: #fff;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        border-radius: 0.75rem;
        .mainHead{
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            margin-bottom: 0.75rem;
            .mainTitle{
                font-weight: bold;
            }
            
        }
        .cosList{
        
        display: flex;
        flex-wrap: wrap;
        .cosItem,.maxCosItem{
          width: 30%;
          margin-left: 5%;
          margin-bottom: 0.75rem;
          .cosImg{
            width: 100%;
            position: relative;
            border-radius: 0.25rem;
            overflow: hidden;
            font-size: 0;
            .sortNum{
              position: absolute;
              padding: 0.25rem 0.5rem;
              // font-size: 0.6rem;
              left: 0;
              font-size: 0.6rem;
              top: 0;
              background-color: #6d94f8;
              color: white;
              border-radius: 0 0 0.25rem 0;
            }
            img{
              width: 100%;
            }
          }
          .cosItemInfo{
            .cosName{
                width: 100%;
                margin-top: 0.25rem;
                margin-bottom: 0.25rem;
                font-size: 0.7rem;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .cosDes{
                color: #999;
                font-size: 0.6rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .cosPrice{
                display: flex;
                align-items: center;
                color: #6d94f8;
                .svipTag{
                  // font-size: 0.6rem;
                  // background-color: #6d94f8;
                  // color: white;
                  // padding: 0.1rem 0.5rem;
                  // margin-right: 0.25rem;
                  // border-radius: 0.25rem;
                }
              }
          }
          
        }
        .maxCosItem{
         width: 48%;
         margin-left: 0;
        }
        .noLeft{
          margin-left: 0;
        }
      }
      .maxCosList{
        justify-content: space-between;
      }
    }
    
    .carCtrl{
      width: 100%;
      background-color: white;
      position:fixed;
      left: 0;
      align-items: center;
      padding: 0.75rem 4%;
      display: flex;
      bottom: -0.1rem;
      box-sizing: border-box;
      justify-content: space-between;
      
      .sumCont{
        width: 0.5rem;
        flex: 1;
        margin-right: 0.75rem;
        color: #666;
        display: flex;
        font-size: 0.7rem;
        align-items: center;
        .sum_price{
          color:#6d94f8;
        }
        .oldPrice{
            text-decoration: line-through;
            color: #999;
            margin-left: 0.25rem;
            position: relative;
            top: 0.15rem;
        }
      }
      .buyBtn{
        padding: 0.6rem 1.5rem;
        background-color: #6d94f8;
        color: white;
        text-align: center;
        font-size: 0.6rem;
        border-radius: 0.25rem;
      }
      .notBuy{
        opacity: 0.5;
      }
    }
  }
  </style>
  